.CollectionPoint {
  display: flex;
  height: 100%;
  overflow: hidden;

  .anchorBL {
    display: none;
  }

  .BMapLabel {
    color: white;
    border: none !important;
    background-color: transparent !important;
  }

  .BMap_Marker {
    img {
      height: 25px;
    }
  }

  >.CollectionPoint_left {
    background: white;
    min-width: 290px;
    padding-top: 2px;

    .box1Title {
      height: 30px;
      line-height: 30px;
      // border: 1px solid #000;
      margin-top: 5px;
      padding-left: 10px;
      background: #f3f5f7;

      >img {
        margin-left: 26%;
      }
    }

    .boxStyle {
      max-height: 0px;
      overflow-y: auto;

      &::-webkit-scrollbar {
        background-color: white;
        width: 0px;
      }

      overflow-x: hidden;
      transition: max-height 0.4s cubic-bezier(0.1, 0.2, 0.3, 0.4);

      .boxList {
        margin: 2px 0;
        display: flex;
        height: 62px;
        line-height: 62px;
        cursor: pointer;

        >.boxListImg {
          padding: 0 10px;

          >img {
            width: 40px;
            height: 40px;
          }
        }

        >.boxListContent {
          height: 28px;
          line-height: 28px;

          .boxListTop {
            font-size: 14px;
            color: #30383e;
            padding-top: 3px;
          }

          .boxListBottom {
            font-size: 12px;
            color: #a1a5b5;
            max-width: 170px;
            max-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      >.boxListShowAll {
        color: #5287ff;
        font-size: 12px;
        padding: 10px 0 10px 20px
      }

      .boxList {
        display: flex;
        height: 62px;
        line-height: 62px;

        >.boxListImg {
          padding: 0 10px;
        }

        >.boxListContent {
          height: 28px;
          line-height: 28px;

          .boxListTop {
            font-size: 14px;
            color: #30383e;
            padding-top: 4px;
          }

          .boxListBottom {
            font-size: 12px;
            color: #a1a5b5;
          }
        }
      }
    }

    // .boxStyle.boxStyleactive {
    //   max-height: 356px;
    // }

    .boxStyle.boxStyleactive2 {
      max-height: 700px;
    }

    .box2Title {
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      background: #f3f5f7;

      >img {
        margin-left: 50%;
        transform: rotate(0deg);
        transition: transform 0.2s;
        cursor: pointer;
      }

      >.imgtoggle {
        transform: rotate(180deg);
      }

      .boxStyle {
        max-height: 0px;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.1, 0.2, 0.3, 0.4);
        width: 230px;

        .boxList {
          display: flex;
          height: 62px;
          line-height: 62px;

          >.boxListImg {
            padding: 0 10px;
          }

          >.boxListContent {
            height: 28px;
            line-height: 28px;

            .boxListTop {
              font-size: 14px;
              color: #30383e;
              padding-top: 3px;
              border: 1px solid #000;
            }

            .boxListBottom {
              font-size: 12px;
              color: #a1a5b5;
            }
          }
        }

        >.boxListShowAll {
          color: #5287ff;
          font-size: 12px;
          padding: 10px 0 10px 20px
        }

        .boxList {
          display: flex;
          height: 62px;
          line-height: 62px;

          >.boxListImg {
            padding: 0 10px;
          }

          >.boxListContent {
            height: 28px;
            line-height: 28px;

            .boxListTop {
              font-size: 14px;
              color: #30383e;
              padding-top: 3px;
            }

            .boxListBottom {
              font-size: 12px;
              color: #a1a5b5;
            }
          }
        }
      }
    }
  }

  >.CollectionPoint_middle {
    width: 70%;
    height: calc(100vh - 230px);
    overflow: hidden;
    position: relative;

    >.kilometre {
      position: absolute;
      top: 20px;
      right: 20px;
      margin-top: 10px;
      z-index: 999;
      background-color: rgba(252, 252, 252, 0.7);
    }

    >.kilometreleft {
      position: absolute;
      top: 20px;
      left: 20px;
      margin-top: 10px;
      z-index: 999;
      font-size: 14px;

      #r-result {
        position: relative;

        img {
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      #suggestId {
        background-color: rgba(252, 252, 252, 0.7);
      }

      #suggestId::-webkit-input-placeholder {
        .commonclass
      }

      #suggestId::-moz-placeholder {
        .commonclass
      }

      #suggestId:-ms-input-placeholder {
        .commonclass
      }
    }

    >.where {
      position: absolute;
      bottom: 20px;
      right: 20px;

      >li {
        height: 35px;
        min-width: 720px;
        margin-bottom: 20px;

        span {
          background-color: rgba(252, 252, 252, 0.7);
          color: #5287ff;
          padding: 8px 14px;
          font-size: 14px;
          min-width: 500px;
          display: inline-block;
        }

        button {
          height: 100%;
          line-height: 35px;
          width: 84px;
          margin-left: 20px;
          background-color: none;
          text-align: center;
          border: 1px solid transparent; //自定义边框
          outline: none; //消除默认点击蓝色边框效果
          background-color: transparent;
          border-radius: 2px;
        }

        button:nth-of-type(1) {
          background-color: #3597f9;
          color: white;
        }

        button:nth-of-type(2) {
          background-color: rgba(252, 252, 252, 0.7);
          color: #5287ff;
          border: 1px solid #5287ff;
        }
      }
    }
  }

  >.CollectionPoint_right {
    min-width: 310px;
    font-size: 16px;
    background: white;


    .caijiDian {
      padding: 20px 0 15px 10px;
    }

    .caijiDianBox {
      height: calc(100vh - 320px);
      overflow-y: auto;
      overflow-x: hidden;

      &::-webkit-scrollbar {
        background-color: white;
        width: 2px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #dbdde1;
        width: 2px;
      }

      .caijiBox {
        padding: 15px 20px 0px 20px;
        cursor: pointer;

        .caijiOne {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;

          span:nth-child(1) {
            color: #5286ff;
            font-size: 18px;
          }

          span:nth-child(2) {
            color: #a1a5b5;
            font-size: 14px;
          }
        }

        .caijiTwo {
          margin-bottom: 9px;
          font-size: 15px;
          color: #30383e;
        }

        .caijiThree {
          margin-bottom: 9px;

          span:nth-child(1) {
            color: #30383e;
            font-size: 14px;
          }

          span:nth-child(2) {
            color: #36c81e;
            font-size: 12px;
          }
        }

        .caijiFour {
          padding-bottom: 15px;
          display: flex;
          justify-content: space-between;
          font-size: 14px;

          span:nth-child(1) {
            color: #a1a5b5;
          }

          span:nth-child(2) {
            color: #30383e;
          }
        }
      }

      .caijiActiveTwo {
        background: rgba(255, 237, 237);

        .caijiOne {
          span:nth-child(1) {
            color: #ff5252 !important;
          }
        }
      }

      .caijiActive {
        background: #5286ff;
        color: white !important;

        .caijiOne {
          color: white !important;

          span:nth-child(1) {
            color: white !important;
          }

          span:nth-child(2) {
            color: white !important;
          }
        }

        .caijiTwo {
          color: white !important;
        }

        .caijiThree {
          color: white !important;

          span:nth-child(1) {
            color: white !important;
          }

          span:nth-child(2) {
            color: white !important;
          }
        }

        .caijiFour {
          color: white !important;

          span:nth-child(1) {
            color: white !important;
          }

          span:nth-child(2) {
            color: white !important;
          }
        }
      }
    }
  }

  .ant-menu-submenu-title {
    background: #f3f5f7;
    margin-bottom: 0 !important;
  }

  .ant-menu-item {
    padding-left: 1px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 54px !important;
    line-height: 54px !important;
  }

  .ant-menu-item::after {
    border: none !important;
  }

  .ant-menu-item-selected {
    background: none !important;
  }
}

.commonclass {
  font-size: 14px;
  color: #a1a5b5;
}

.pop_shadow {
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.65);
  height: 100vh;
  width: 100vw;
  z-index: 1000;
  >.pop_shadow_son {
    height: 300px;
    width: 600px;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: white;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translate(-50%, -50%);
    >.pop_shadow_header {
      height: 81px;
      font-size: 24px;
      color: #3f484f;
      text-align: center;
      line-height: 81px;

      img {
        position: absolute;
        right: 30px;
        top: 30px;
      }
    }

    >.pop_shadow_moddle {
      padding: 0px 60px;
      padding-top: 40px;
      color: #3f484f;
      font-size: 16px;
      height: 140px;
    }

    >.pop_shadow_footer {
      text-align: center;
      >button {
        margin: 0;
        padding: 0;
        border: 1px solid transparent; //自定义边框
        outline: none; //消除默认点击蓝色边框效果
        background-color: transparent;
        height: 50px;
        width: 125px;
        color: #616577;
        text-align: center;
        line-height: 50px;
        border: 1px solid #cad3de;
        font-size: 20px;
        border-radius: 2px;
      }
      >button:last-child{
        margin-left: 60px;
        border: none;
        background-color: #057ffa;
        color: white;
      }
    }
  }
}